<template>
  <div>
    <el-page-header content="修改文章" @back="goBack" />
    <el-form 
    style="margin-top:20px;" 
    ref="form" 
    :model="form"
    :rules="rules"
    label-width="120px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="form.author"></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="description">
        <el-input v-model="form.description" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="是否发布" prop="isPublished">
        <el-radio-group v-model="form.isPublished">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { update as updateArticle, get as getArticle} from '@/api/cms/article.service.js'

export default {
  data() {
    return {
      form: {
        title: '',
        author: '',
        description: '',
        publishTime: '',
        isPublished: 1,
        content: ''
      },
      rules: {
        title: [{
          required: true,
          message: '标题不能为空',
          trigger: 'blur',
        }],
        author: [{
          required: true,
          message: '作者不能为空',
          trigger: 'blur',
        }]
      }
    }
  },
  created() {
    getArticle(this.$route.query.id).then(res=>{
      if(res.data.code === 0) {
        this.form = res.data.data
      }
    })
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          updateArticle(this.form).then(res=>{
            if(res.data.code === 0) {
              this.$message({
                message: '修改成功',
                type: 'success',
              })
              this.goBack()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs['form'].resetFields()
    },
  }
}
</script>

<style>

</style>